<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>MDB作业</title>
  <!-- MDB icon -->
  <link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <!-- Material Design Bootstrap -->
  <link rel="stylesheet" href="css/mdb.min.css">
  <!-- Your custom styles (optional) -->
  <link rel="stylesheet" href="css/style.css">
</head>

<body>

  <!-- start your project here -->
  <!-- Main navigation -->
  <header id="home">
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
      <div class="container">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02"
          aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
          <ul class="navbar-nav mr-auto smooth-scroll">
            <li class="nav-item">
              <a class="nav-link" href="#home">Home
                <span class="sr-only">(current)</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#about" data-offset="90">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#contact" data-offset="90">Contact</a>
            </li>
          </ul>
          <!-- Social Icon  -->
          <ul class="navbar-nav nav-flex-icons">
            <li class="nav-item">
              <a class="nav-link">
                <i class="fab fa-facebook-f light-green-text-2"></i>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link">
                <i class="fab fa-twitter light-green-text-2"></i>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link">
                <i class="fab fa-instagram light-green-text-2"></i>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- Navbar -->
    <!-- Full Page Intro -->
    <div class="view">
      <video class="video-intro" poster="https://mdbootstrap.com/img/Photos/Others/background.jpg" playsinline autoplay
        muted loop>
        <source src="https://mdbootstrap.com/img/video/animation.mp4" type="video/mp4">
      </video>
      <!-- Mask & flexbox options-->
      <div class="mask rgba-gradient d-flex justify-content-center align-items-center">
        <!-- Content -->
        <div class="container px-md-3 px-sm-0">
          <!--Grid row-->
          <div class="row wow fadeIn">
            <!--Grid column-->
            <div class="col-md-12 mb-4 white-text text-center wow fadeIn">
              <h3 class="display-3 font-weight-bold white-text mb-0 pt-md-5 pt-5">Delicious Food</h3>
              <hr class="hr-light my-4 w-75">
              <h4 class="subtext-header mt-2 mb-4">Only fill the stomach, people will not be empty.</h4>
              <a href="#about" class="btn btn-rounded btn-outline-white">
                <i class="fas fa-home "></i> Visit us
              </a>
            </div>
            <!--Grid column-->
          </div>
          <!--Grid row-->
        </div>
        <!-- Content -->
      </div>
      <!-- Mask & flexbox options-->
    </div>
    <!-- Full Page Intro -->
  </header>
  <!--Main layout-->

  <!--Main container-->
  <div class="container text-center py-5" id="about">
    <h2 class="h1-responsive font-weight-bold text-center mb-5">About</h2>
    <!--Grid row 1-->
    <div class="row">

      <!--Grid column-->
      <div class="col-lg-4 col-md-12">

        <!--Card-->
        <div class="card">

          <!--Card image-->
          <div class="view overlay">
            <img src="./img/myimg/jiugongehuoguo.png" class="card-img-top" alt="">
            <a href="#">
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <!--Card content-->
          <div class="card-body">
            <!-- Label -->
            <h5 class="pink-text pb-2 pt-1"><i class="fas fa-utensils"></i> Culinary</h5>
            <!--Title-->
            <h4 class="card-title">Jiugongge Hot Pot</h4>
            <!--Text-->
            <p class="card-text">There is a table of eight immortals. Strangers are sitting on all sides, one person in
              front of the other.
              They don't take advantage of each other, and they eat hot. They eat a certain amount of money.</p>
            <a href="#contact" class="btn btn-unique">purchase</a>
          </div>

        </div>
        <!--/.Card-->

      </div>
      <!--Grid column-->

      <!--Grid column-->
      <div class="col-lg-4 col-md-6">

        <!--Card-->
        <div class="card">

          <!--Card image-->
          <div class="view overlay">
            <img src="./img/myimg/niupai.png" class="card-img-top" alt="">
            <a href="#">
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <!--Card content-->
          <div class="card-body">
            <!-- Label -->
            <h5 class="pink-text pb-2 pt-1"><i class="fas fa-utensils"></i> Culinary</h5>
            <!--Title-->
            <h4 class="card-title">Steak</h4>
            <!--Text-->
            <p class="card-text">Steak, or steak, is a slice of beef, is one of the common western food.
              The main cooking methods of steak are frying and baking.</p>
            <a href="#contact" class="btn btn-unique">purchase</a>
          </div>

        </div>
        <!--/.Card-->

      </div>
      <!--Grid column-->

      <!--Grid column-->
      <div class="col-lg-4 col-md-6">

        <!--Card-->
        <div class="card">

          <!--Card image-->
          <div class="view overlay">
            <img src="./img/myimg/yangrouchuan.png" class="card-img-top" alt="">
            <a href="#">
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <!--Card content-->
          <div class="card-body">
            <!-- Label -->
            <h5 class="pink-text pb-2 pt-1"><i class="fas fa-utensils"></i> Culinary</h5>
            <!--Title-->
            <h4 class="card-title">Mutton Shashlik</h4>
            <!--Text-->
            <p class="card-text">Mutton kebab is a kind of common barbecue dish, which is made of fresh mutton with
              bamboo or steel sticks.</p>
            <a href="#contact" class="btn btn-unique">purchase</a>
          </div>

        </div>
        <!--/.Card-->

      </div>
      <!--Grid column-->

    </div>
    <!--Grid row-->
    <!--Grid row 2-->
    <div class="row" style="margin:20px">

      <!--Grid column-->
      <div class="col-lg-4 col-md-12">

        <!--Card-->
        <div class="card">

          <!--Card image-->
          <div class="view overlay">
            <img src="./img/myimg/rouzong.png" class="card-img-top" alt="">
            <a href="#">
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <!--Card content-->
          <div class="card-body">
            <!-- Label -->
            <h5 class="pink-text pb-2 pt-1"><i class="fas fa-utensils"></i> Culinary</h5>
            <!--Title-->
            <h4 class="card-title">Rice Dumpling With Meat</h4>
            <!--Text-->
            <p class="card-text">As the Dragon Boat Festival food custom. It has a long history, sweet taste, not
              greasy, bright red and yellow color.
              It is famous at home and abroad for its unique flavor.</p>
            <a href="#contact" class="btn btn-unique">purchase</a>
          </div>

        </div>
        <!--/.Card-->

      </div>
      <!--Grid column-->

      <!--Grid column-->
      <div class="col-lg-4 col-md-6">

        <!--Card-->
        <div class="card">

          <!--Card image-->
          <div class="view overlay">
            <img src="./img/myimg/xiaolongxia.png" class="card-img-top" alt="">
            <a href="#">
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <!--Card content-->
          <div class="card-body">
            <!-- Label -->
            <h5 class="pink-text pb-2 pt-1"><i class="fas fa-utensils"></i> Culinary</h5>
            <!--Title-->
            <h4 class="card-title">Lobster</h4>
            <!--Text-->
            <p class="card-text">Wearing helmets and armor, dancing long beard, carrying a brave man with sword.
              Don't go around the world with your pride.</p>
            <a href="#contact" class="btn btn-unique">purchase</a>
          </div>

        </div>
        <!--/.Card-->

      </div>
      <!--Grid column-->

      <!--Grid column-->
      <div class="col-lg-4 col-md-6">

        <!--Card-->
        <div class="card">

          <!--Card image-->
          <div class="view overlay">
            <img src="./img/myimg/pijiu.png" class="card-img-top" alt="">
            <a href="#">
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <!--Card content-->
          <div class="card-body">
            <!-- Label -->
            <h5 class="pink-text pb-2 pt-1"><i class="fas fa-utensils"></i> Culinary</h5>
            <!--Title-->
            <h4 class="card-title">Beer</h4>
            <!--Text-->
            <p class="card-text">A kind of alcoholic beverage is made from malt and malt as the main raw materials,
              hops, liquid gelatinization and saccharification, and then liquid fermentation.</p>
            <a href="#contact" class="btn btn-unique">purchase</a>
          </div>

        </div>
        <!--/.Card-->

      </div>
      <!--Grid column-->

    </div>
    <!--Grid row 3-->
    <div class="row">

      <!--Grid column-->
      <div class="col-lg-4 col-md-12">

        <!--Card-->
        <div class="card">

          <!--Card image-->
          <div class="view overlay">
            <img src="./img/myimg/xiguabingyin.png" class="card-img-top" alt="">
            <a href="#">
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <!--Card content-->
          <div class="card-body">
            <!-- Label -->
            <h5 class="pink-text pb-2 pt-1"><i class="fas fa-utensils"></i> Culinary</h5>
            <!--Title-->
            <h4 class="card-title">Watermelon Juice</h4>
            <!--Text-->
            <p class="card-text">Watermelon juice is a kind of juice product made from watermelon by physical methods
              such as pressing, centrifugation and extraction, which has the effect of relieving summer heat. The taste
              is sweet and delicate,
              It tastes better when it's chilled, and is popular in summer. No preservatives are added.</p>
            <a href="#contact" class="btn btn-unique">purchase</a>
          </div>

        </div>
        <!--/.Card-->

      </div>
      <!--Grid column-->

      <!--Grid column-->
      <div class="col-lg-4 col-md-6">

        <!--Card-->
        <div class="card">

          <!--Card image-->
          <div class="view overlay">
            <img src="./img/myimg/xinxianshuiguo.png" class="card-img-top" alt="">
            <a href="#">
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <!--Card content-->
          <div class="card-body">
            <!-- Label -->
            <h5 class="pink-text pb-2 pt-1"><i class="fas fa-utensils"></i> Culinary</h5>
            <!--Title-->
            <h4 class="card-title">Fruits</h4>
            <!--Text-->
            <p class="card-text">Fruit is a kind of food that is very beneficial to our health. Fruit nutrition refers
              to the material and cultural nutrition of fruit.
              Ordinary fruits are rich in vitamins, dietary fiber and other nutrients, while creative cultural fruits
              also have cultural nutrition.</p>
            <a href="#contact" class="btn btn-unique">purchase</a>
          </div>

        </div>
        <!--/.Card-->

      </div>
      <!--Grid column-->

      <!--Grid column-->
      <div class="col-lg-4 col-md-6">

        <!--Card-->
        <div class="card">

          <!--Card image-->
          <div class="view overlay">
            <img src="./img/myimg/shuiguoyinliao.png" class="card-img-top" alt="">
            <a href="#">
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <!--Card content-->
          <div class="card-body">
            <!-- Label -->
            <h5 class="pink-text pb-2 pt-1"><i class="fas fa-utensils"></i> Culinary</h5>
            <!--Title-->
            <h4 class="card-title">Fruit Juice</h4>
            <!--Text-->
            <p class="card-text">Fruit juice beverage is a kind of juice product made from fruit by physical methods
              such as pressing, centrifugation and extraction,
              It generally refers to pure juice or 100% juice. Juice can be divided into clarified juice and turbid
              juice according to the shape.</p>
            <a href="#contact" class="btn btn-unique">purchase</a>
          </div>

        </div>
        <!--/.Card-->

      </div>
      <!--Grid column-->

    </div>
    <!--Grid row-->
  </div>
  <!--Main container-->
  <!--Footer-->
  <footer class="page-footer font-small pt-4" style="background-color: #563e91">
    <!--Section: contact-->
    <section id="contact" class="py-5" style="background-color: #eee;">

      <div class="container">

        <!-- Section heading -->
        <h2 class="h1-responsive font-weight-bold text-center mb-5 grey-text">Contact us</h2>
        <!-- Section description -->
        <p class="text-center w-responsive mx-auto mb-5 grey-text">Guess you also like the food you want. It's better to
          move than
          to move.

          Order now.</p>

        <!-- Grid row -->
        <div class="row">

          <!-- Grid column -->
          <div class="col-md-9 mb-md-0 mb-5">

            <form>

              <!-- Grid row -->
              <div class="row">

                <!-- Grid column -->
                <div class="col-md-6">
                  <div class="md-form mb-0">
                    <input type="text" id="contact-name" class="form-control">
                    <label for="contact-name" class="">Your name</label>
                  </div>
                </div>
                <!-- Grid column -->

                <!-- Grid column -->
                <div class="col-md-6">
                  <div class="md-form mb-0">
                    <input type="text" id="contact-email" class="form-control">
                    <label for="contact-email" class="">Your email</label>
                  </div>
                </div>
                <!-- Grid column -->

              </div>
              <!-- Grid row -->

              <!-- Grid row -->
              <div class="row">

                <!-- Grid column -->
                <div class="col-md-12">
                  <div class="md-form mb-0">
                    <input type="text" id="contact-Subject" class="form-control">
                    <label for="contact-Subject" class="">Subject</label>
                  </div>
                </div>
                <!-- Grid column -->

              </div>
              <!-- Grid row -->

              <!-- Grid row -->
              <div class="row">

                <!-- Grid column -->
                <div class="col-md-12">
                  <div class="md-form">
                    <textarea type="text" id="contact-message" class="form-control md-textarea" rows="3"></textarea>
                    <label for="contact-message">Your message</label>
                  </div>
                </div>
                <!-- Grid column -->

              </div>
              <!-- Grid row -->

            </form>

            <div class="text-center text-md-left">
              <a class="btn btn-purple btn-md">Send</a>
            </div>

          </div>
          <!-- Grid column -->

          <!-- Grid column -->
          <div class="col-md-3 text-center">
            <ul class="list-unstyled mb-0">
              <li>
                <i class="fas fa-map-marker-alt fa-2x purple-text"></i>
                <p>CQJTU,ChongQing</p>
              </li>
              <li>
                <i class="fas fa-phone fa-2x mt-4 purple-text"></i>
                <p>631907060434</p>
              </li>
              <li>
                <i class="fas fa-envelope fa-2x mt-4 purple-text"></i>
                <p class="mb-0">contact@qq.com</p>
              </li>
            </ul>
          </div>
          <!-- Grid column -->

        </div>
        <!-- Grid row -->

      </div>

    </section>
    <!--Section: contact-->



    <!-- Footer Elements -->
    <div class="container">

      <!-- Social buttons -->
      <ul class="list-unstyled list-inline text-center">
        <li class="list-inline-item">
          <a class="btn-floating btn-fb mx-1">
            <i class="fab fa-facebook-f"> </i>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="btn-floating btn-tw mx-1">
            <i class="fab fa-twitter"> </i>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="btn-floating btn-gplus mx-1">
            <i class="fab fa-google-plus-g"> </i>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="btn-floating btn-li mx-1">
            <i class="fab fa-linkedin-in"> </i>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="btn-floating btn-dribbble mx-1">
            <i class="fab fa-dribbble"> </i>
          </a>
        </li>
      </ul>
      <!-- Social buttons -->

    </div>
    <!-- Footer Elements -->

    <!-- Copyright -->
    <div class="footer-copyright text-center py-3">© 2018 Copyright:
      <a href="https://mdbootstrap.com/education/bootstrap/"> MDBootstrap.com</a>
    </div>
    <!-- Copyright -->
  </footer>
  <!--Footer-->
  <!-- end your project here -->

  <!-- jQuery -->
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <!-- Bootstrap tooltips -->
  <script type="text/javascript" src="js/popper.min.js"></script>
  <!-- Bootstrap core JavaScript -->
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <!-- MDB core JavaScript -->
  <script type="text/javascript" src="js/mdb.min.js"></script>
  <!-- Your custom scripts (optional) -->
  <script type="text/javascript"></script>

</body>

</html>
